<template>
	<view class="content">
		<view class="recharge">
			<text class="title">充值金额：</text>
			<view class="money">
				<input type="digit" placeholder="请输入金额"/>
				<text>元</text>
			</view>
			<view class="ratio">
				<text>可得积分</text>
				<text class="integral">1000</text>
				<text>（兑换比例 1:10）</text>
			</view>
			
			<view class="btn">
				<button>开始充值</button>
			</view>
			
			<view class="warn">
				<text class="yzb yzb-tixing"></text>
				<text class="tips">
					当前在线充值暂未开放，请联系客服进行积分充值。联系方式请查看：我的 -> 联系我们 。
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
 page{
	 background-color: #f8f8f8;
 }
 
 .recharge{
	 margin-top: 20upx;
	 background-color: #ffffff;
	 padding: 80upx 20upx;
	 
	 .title{
		 font-weight: bold;
		 font-size: 32upx;
	 }
	 .money{
		 display: flex;
		 flex-direction: row;
		 align-items: center;
		 input{
			 font-size: 34upx;
			 color: #D91E0D;
			 font-weight: bold;
			 width: 90%;
			 text-align: center;
			 height: 120upx;
			 border-bottom: 1upx solid #eee;
		 }
		 text{
			 font-weight: bold;
		 }
	 }
	 .ratio{
		 margin-top: 30upx;
		 color: #999;
		 display: flex;
		 flex-direction: row;
		 align-items: center;
		 font-size: 28upx;
		 
		 .integral{
			 margin: 0 10upx;
			 color: #D91E0D;
		 }
	 }
	 
	 .btn{
		 margin-top: 150upx;
		 button{
			 // background-color: $main-color;
			 background-color: #999;
			 color: #ffffff;
		 }
	 }
	 
	 .warn{
		 margin-top: 30upx;
		 font-size: 28upx;
		 .yzb{
			 color: #f0ad4e;
			 margin: 0 10upx;
			 margin-top: 2upx;
		 }
		 .tips{
			 color: #DE868F;
		 }
	 }
	 
 }

 
</style>
